<template>
  <Modal :show="showModal" style="align-items: flex-end">
    <div class="wallet-kit-modal-content">
      <div style="height: 28px; margin: 14px 14px 16px 14px">
        <ModalHeader
          :uid="MobileMiniModalConstant?.CONTEXT_UID"
          :stack-frame="currentStackFrame"
          @back="backStack"
          @close="close"
        />
      </div>
      <div class="tap-button" style="display: flex; justify-content: center; align-items: center" @click="retry">
        <img style="width: 60px; height: 60px; border-radius: 8px" :src="wallet.icon ?? wallet.iconUrl" />
        <LoadingSpinner :wallet="wallet" />
      </div>
      <div style="text-align: center; margin-top: 28px; margin-bottom: 32px">
        <div style="font-size: 16px; font-weight: bold">Continue in {{ wallet.name }}</div>
        <div>Accept connection request in the wallet</div>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
  import { MobileMiniModalConstant } from '../../constants/ModalContextConstant'
  import Modal from '../Modal/index.vue'
  import ModalHeader from '../Modal/ModalHeader.vue'
  import { useModalContext } from '../../hooks/useModalContext'
  import { useModal } from '../../hooks/useModal'
  import type { WalletConnector } from '../../wallets/useWalletConnectors'
  import LoadingSpinner from '../Icons/LoadingSpinner.vue'

  withDefaults(
    defineProps<{
      wallet: WalletConnector
    }>(),
    {}
  )

  const emits = defineEmits(['open', 'close', 'retry'])

  const { currentStackFrame, toStack, backStack } = useModalContext({
    uid: MobileMiniModalConstant?.CONTEXT_UID
  })

  const {
    state: showModal,
    close,
    open
  } = useModal({
    onOpen() {
      emits('open')
    },
    onClose() {
      toStack(0, {
        title: '',
        haveBackIcon: false
      })
      emits('close')
    }
  })

  const retry = () => {
    emits('retry')
  }

  defineExpose({
    showModal,
    open,
    close
  })
</script>

<style lang="scss" scoped>
  .tap-button {
    cursor: pointer;
    transition: all 0.3s ease;
    &:hover {
      transform: scale(1.05);
    }
    &:active {
      transform: scale(0.95);
    }
  }

  .wallet-kit-modal-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 200px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
    background: #1a1b1f;
    border-radius: 16px 16px 0 0;
    color: #f2f2f2;
  }
</style>
